<script setup>
import {ref, onMounted} from 'vue';
import {useRoute} from "vue-router";
import {InfoFilled} from "@element-plus/icons-vue";
import {reqOrderInfo, reqCancelOrder, reqQrcode, reqQueryPayState} from "@/api/user/index";
import {ElMessage} from "element-plus";

// 生成二维码插件
import QRCode from 'qrcode';

const orderInfo = ref({});

onMounted(() => {
  getOrderInfo();
})

// 获取订单详情
const getOrderInfo = async () => {
  const res = await reqOrderInfo(route.query.orderId);
  if (res.code === 200) {
    orderInfo.value = res.data;
  }
}

const route = useRoute();
//取消订单   订单状态有三种 orderStatus  -1  取消预约  0 预约但是没有支付  1 支付成功
const handleConfirm = async () => {
  try {
    //   取消预约订单
    const res = await reqCancelOrder(route.query.orderId);
    getOrderInfo();
    ElMessage.success(res.message);
  } catch (error) {
    ElMessage.error(error.message, '取消预约失败');
    // console.log(error, '取消预约失败');
  }
}

const handleCancel = () => {
  // console.log('cancel')
}

// 获取二维码图片地址
const imgUrl = ref('');
const dialogVisible = ref(false);
const timer = ref(null);

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
  // 清除定时器
  clearInterval(timer.value);
}

// 支付按钮点击事件
const handlePay = async () => {
  // 显示弹窗
  dialogVisible.value = true;
  // 获取支付需要使用二维码信息
  const res = await reqQrcode(route.query.orderId);
  // // 根据服务器返回二维码信息生成二维码图片
  imgUrl.value = QRCode.toDataURL(res.data.codeUrl);
  // //询问服务器当前这笔交易的支付结果
  // //只要二维码查来:需要每隔几秒询问服务器是否支付成功
  // //如果支付成功:关闭弹窗,跳转到支付成功页面
  // //如果支付失败:关闭弹窗,提示支付失败,跳转到支付失败页面
  timer.value = setInterval(async () => {
    const res = await reqQueryPayState(route.query.orderId)
    if (res.code === 200) {
      dialogVisible.value = false;
      ElMessage.success('支付成功');
      // 清除定时器
      clearInterval(timer.value);
      getOrderInfo();
    } else {
      ElMessage.error('支付失败');
    }
  }, 2000);
}


</script>

<template>
  <div class="user-order">
    <el-card>
      <template #header>
        <h1>用户挂号详情</h1>
      </template>
      <div class="order-status">
        <span class="span">
          <svg
              t="1685933792381"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2389"
              width="16"
              height="16"
          >
          <path
              d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
              fill="#1afa29"
              p-id="2390"
          ></path>
        </svg>
          {{ orderInfo.param?.orderStatusString }}
        </span>
        <div class="img-box">
          <img src="/src/assets/images/code_app.png" alt="">
          <div class="qr-code">
            <p>微信 <img src="/src/assets/WeChat-1.png" alt="" style="width: 10px;height: 10px;margin: 0 3px;">
              扫码关注 “医生助手”
            </p>
            <p>“快速预约挂号”</p>
          </div>

        </div>
      </div>

      <div class="order-info">
        <div class="order-left">
          <el-descriptions
              class="margin-top"
              :column="1"
              border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊人姓名
                </div>
              </template>
              {{ orderInfo.patientName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊日期
                </div>
              </template>
              {{ orderInfo.reserveDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊医院
                </div>
              </template>
              {{ orderInfo.hosname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊科室
                </div>
              </template>
              {{ orderInfo.depname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  医生职称
                </div>
              </template>
              {{ orderInfo.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  就诊服务费
                </div>
              </template>
              {{ orderInfo.amount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  挂号单号
                </div>
              </template>
              {{ orderInfo.outTradeNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  挂号时间
                </div>
              </template>
              {{ orderInfo.createTime }}
            </el-descriptions-item>
          </el-descriptions>
          <div class="btn-group" v-if="orderInfo.orderStatus === 0 || orderInfo.orderStatus === 1">
            <el-popconfirm
                :icon="InfoFilled"
                icon-color="#f56c6c"
                title="确认取消预约?"
                @confirm="handleConfirm"
                @cancel="handleCancel"
            >
              <template #reference>
                <el-button type="danger">取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" @click="handlePay" v-if="orderInfo.orderStatus === 0">支付</el-button>
          </div>

        </div>
        <div class="order-right">
          <el-card class="card-tips">
            <template #header>
              <div class="title">
                注意事项
              </div>
            </template>
            <div class="content">
              <p>1、请准时到达医院，提前15分钟预约挂号，否则挂号单将作废，请您谅解！</p>
              <p>2、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由您自行承担。</p>
              <p style="color: #f66b6b">
                3、【取号】就诊当天需在{{ orderInfo.fetchTime }}前取号，超时未取号视为爽约，不予退换号码。
              </p>
              <p style="color: #f66b6b">
                4、【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；。
              </p>
              <p>5、预约挂号支持自费、医保两种支付方式，医保支付需缴纳医保卡费用，自费患者使用身份证预约挂号，支付金额以挂号时约定为准。</p>
              <p>6、若有特殊情况，请及时联系医生，以免耽误您的就诊时间。</p>
            </div>
          </el-card>
        </div>
      </div>

    </el-card>

    <!-- 展示支付二维码的结构 -->
    <el-dialog v-model="dialogVisible" title="微信支付" width="400">
      <!-- 支付需要使用的二维码图片 -->
      <div class="qrcode">
        <img src="/src/assets/images/code_app.png" alt=""/>
        <img :src="imgUrl" alt=""/>
        <p>请使用微信扫一扫</p>
        <p>扫描二维码支付</p>
      </div>
      <!-- 对话框底部插槽传递结构 -->
      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<style scoped lang="scss">
.user-order {
  width: 100%;
  height: 100%;
  //display: flex;
  //flex-direction: column;
  margin-top: 20px;
  //border: 1px solid #eca2a2;

  h1 {
    font-size: 24px;
    font-weight: bold;
    color: #7f7f7f;
  }

  .order-status {
    display: flex;
    justify-content: space-between;

    .span {
      height: 24px;
      line-height: 24px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: bold;
      color: #84cd92;
      background: #effbe4;
      border-radius: 5px;
    }

    .img-box {
      display: flex;

      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }

      .qr-code {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
          font-size: 12px;
          color: #333;
          margin-top: 5px;
        }
      }
    }
  }

  .order-info {
    display: flex;
    margin: 10px;
    border-radius: 5px;
    border-top: 2px solid #e6e6e6;

    .order-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 5px;
      color: #333;
      margin: 10px 15px 10px 0;

      .btn-group {
        margin-top: 20px;
      }
    }

    .order-right {
      flex: 1;
      margin-top: 10px;

      .card-tips {
        border-radius: 5px;
        font-size: 16px;
        font-family: "Arial", sans-serif;

        .title {
          font-size: 18px;
          font-weight: bold;
          color: #7f7f7f;
        }

        .content {
          line-height: 1.5;
          font-size: 14px;
          color: #666;

          p {
            margin-bottom: 5px;
          }
        }
      }
    }
  }

}

.qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    line-height: 30px;
  }
}

</style>